<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue demo</title>
<script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script>
<script src="https://cdn.staticfile.net/axios/1.5.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="site in sites" :key="site.id">
            <div>
                <p>{{site.Env}}: {{ site.token }}</p>
                <button @click="copyToClipboard(site.token)">复制</button>
            </div>
        </li>
    </ol>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      sites: []
    }
  },
  mounted () {
    axios
      .get('https://dny-token.fanservice.fun/getValidTokens?page_size=10&page=1&env=all') 
      .then(response => {
        this.sites = response.data; // 将获取的数据赋值给 sites 数组
      })
      .catch(function (error) { // 请求失败处理
        console.error(error);
    });
  },
  methods: {
    copyToClipboard(text) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      alert('Token 已复制到剪贴板');
    }
  }
});

app.mount('#app');
</script>
</body>
</html>